<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>

<p>Hello World</p>

<div id="div"></div>

<div>
    <button onclick="alertSample();">alert</button>
</div>

<div>
    <button onclick="confirmSample();">confirm</button>
</div>

<div>
    <button onclick="promptSample();">prompt</button>
</div>

<div>
    <button onclick="consoleSample();">console</button>
</div>

<script>

    // 用于演示在 webview 中使用本地存储
    localStorage.setItem("name", "webabcd");
    const name = localStorage.getItem("name");
    document.getElementById('div').innerHTML = `name: ${name}<br/>`

    // 用于演示在 webview 中拦截 alert
    function alertSample() {
        alert("i am alert")
        document.getElementById('div').innerHTML += `alert ok<br/>`
    }

    // 用于演示在 webview 中拦截 confirm
    function confirmSample() {
        let r = confirm("i am confirm");
        if (r == true) {
            document.getElementById('div').innerHTML += `confirm ok<br/>`
        } else {
            document.getElementById('div').innerHTML += `confirm cancel<br/>`
        }
    }

    // 用于演示在 webview 中拦截 prompt
    function promptSample() {
        let message = prompt("i am prompt");
        if (message != null) {
            document.getElementById('div').innerHTML += `prompt ${message}<br/>`
        } else {
            document.getElementById('div').innerHTML += `prompt cancel<br/>`
        }
    }

    // 用于演示在 webview 中拦截 console
    function consoleSample() {
        console.debug("console debug")
        console.info("console info")
        console.warn("console warn")
        console.error("console error")
    }

</script>
</body>
</html>